.formkit-outer {
  font-family: var(--fk-font-family);
  font-weight: var(--fk-font-weight);
  font-size: var(--fk-font-size);
  line-height: var(--fk-line-height);

  &[data-type="textarea"] textarea {
    line-height: var(--fk-line-height-textarea);
  }
}

.formkit-label {
  font-family: var(--fk-font-family-label);
  font-size: var(--fk-font-size-label);
  font-weight: var(--fk-font-weight-label);
  line-height: var(--fk-line-height-label);

  @nest
  [data-type="checkbox"] &,
  [data-type="radio"] &,
  .formkit-option & {
    font-weight: var(--fk-font-weight-option);
    font-size: var(--fk-font-size-option);
    margin-bottom: 0.1em;
  }
}

.formkit-legend {
  font-family: var(--fk-font-family-legend);
  font-size: var(--fk-font-size-legend);
  font-weight: var(--fk-font-weight-legend);
}

.formkit-input {
  font-family: var(--fk-font-family-input);
  font-size: var(--fk-font-size-input);
  font-weight: var(--fk-font-weight-input);
  line-height: var(--fk-line-height-input);
}

.formkit-help,
.formkit-option-help {
  font-family: var(--fk-font-family-help);
  font-size: var(--fk-font-size-help);
  font-weight: var(--fk-font-weight-help);
  line-height: var(--fk-line-height-help);
}

.formkit-messages {
  font-family: var(--fk-font-family-message);
  font-family: var(--fk-font-family);
  line-height: var(--fk-line-height-message);
}

.formkit-message {
  font-size: var(--fk-font-size-message);
  font-weight: var(--fk-font-weight-message);
}
